<template>
    <el-main>
        <el-card class="ep-card ep-search">
                <el-row :gutter="0">
                    <el-col  style="text-align:right">
                      <el-button type="primary" icon="el-icon-search" @click="back">返回</el-button>
                    </el-col>
                </el-row>    
        </el-card>
        <el-card class="ep-card" style="height: calc(100vh - 280px);">
            <el-row style="margin-top: 10px;">
                <el-table
                    :data="tableData"
                    border
                    :height="height" 
                    style="width: 100%">
                    <el-table-column
                        type="index"
                        label="序号"
                        align="center"
                        width="50">
                    </el-table-column>
                    <el-table-column
                        prop="projectCode"
                        align="center"
                        label="项目编号">
                    </el-table-column>
                    <el-table-column
                        prop="projectName"
                        align="center"
                        label="项目名称">
                    </el-table-column>
                    <el-table-column
                        prop="name"
                        align="center"
                        label="流程名称">
                    </el-table-column>
                    <el-table-column
                        prop="status"
                        align="center"
                        width="120"
                        label="状态">
                        <template slot-scope="scope">
                            <div v-for="item in instanceState" :key="item.key">
                                    <span v-if="item.key==scope.row.state" :style="item.style">
                                        {{item.label}}
                                    </span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="createDate"
                        align="center"
                        width="120"
                        label="开始时间" type="date" :formatter="dateFormatter">
                    </el-table-column>
                    <el-table-column
                        prop="name"
                        align="center"
                        label="执行情况"
                        width="150">
                        <template slot-scope="scope">
                           <el-button type="text"  @click="progress(scope.row)">进展</el-button>
                           <el-button type="text"  @click="showDetail(scope.row)">项目明细</el-button>
                        </template>
                    </el-table-column>
                    
                    <el-table-column
                        prop="name"
                        align="center"
                        label="操作"
                        width="180">
                        <template slot-scope="scope">
                            <el-button type="text" :disabled="scope.row.state !== '1'" @click="doPause(scope.row)">暂缓</el-button>
                            <el-button type="text" :disabled="scope.row.state !== '2'" @click="doResume(scope.row)">恢复</el-button>
                            <el-button type="text" :disabled="scope.row.state === '3'|| scope.row.state === '4'" @click="doEnd(scope.row)">终止</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    v-show="tableData.length > 0"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pager.page"
                    background
                    :page-sizes="[20, 40, 60, 80]"
                    :page-size="pager.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pager.total">
                </el-pagination>
            </el-row>
        </el-card>
        <el-dialog  title="项目信息" :visible.sync="designerVisible" width="70%">
                <projHandleDisplay ref="projHandleDisplay"></projHandleDisplay>
        </el-dialog>
    </el-main>
</template>
<script>
    export default {
    components: {
        projHandleDisplay: require("@/pages/biz/proj/projDisplay/projHandleDisplay.vue")
          .default
      },
    name: "Index",
    data() {
        return {
            ids: [],
            designerVisible:false,
            projCode:this.$route.query.projCode,
            searchForm: {
              name: ''
            },
            tableData: [],
            pager: {
                page: 0,
                size: 20,
                total: 0
            },
            dialogTitle: '流程实例',
            entityId: '',
            instanceState: [{key:"1",label:"运行中" ,style:"color:green;"},{key:"2",label:"暂停",style:"color:yellow;"},{key:"3",label:"正常终止",style:"color:red;"},{key:"4",label:"异常终止",style:"color:purple;"}],
        }
    },
    computed: {
        height() {
            return `calc(100vh - 350px)`;
        }
    },
    mounted() {
        this.getList();
        this.projCode=this.$route.query.projCode;
    },
    methods: {
        //恢复
        doResume: function (item){
            this.entityId = item.id;
            let params = {
                id : this.entityId
            };
            this.$api.post(   '/wf/workflowInstance/resume', params).then(res => {
                if (res.status === '0') {
                    this.$message({
                        type: 'success',
                        message: res.message
                    });
                    this.getList();
                }else{
                    this.$message({
                        type: 'error',
                        message: res.message
                    });
                }
            });
        },
        back(){
            let path='/proj/projList'
            this.$router.push({
                    path: path,
                    query: {
                    }
                });
  
        },
        // 暂缓
        doPause: function (item) {

            this.entityId = item.id;
            let params = {
                id : this.entityId
            };
            this.$api.post(   '/wf/workflowInstance/pause', params).then(res => {
                if (res.status === '0') {
                    this.$message({
                        type: 'success',
                        message: res.message
                    });
                    this.getList();
                }else{
                    this.$message({
                        type: 'error',
                        message: res.message
                    });
                }
            });
        },

        // 终止
        doEnd: function(item){

            this.entityId = item.id;
            let params = {
                id : this.entityId
            };
            this.$api.post(  '/wf/workflowInstance/end', params).then(res => {
                if (res.status === '0') {
                    this.$message({
                        type: 'success',
                        message: res.message
                    });
                    this.getList();
                }else{
                    this.$message({
                        type: 'error',
                        message: res.message
                    });
                }
            });
        },
        // 获取任务列表
        getList: function () {
            let params = {
                page: this.pager.page === 0 ? this.pager.page : this.pager.page - 1,
                size: this.pager.size,
                name: this.searchForm.name || '',
                projectCode:this.projCode || '',
            };
            this.$api.formPost(  '/api/biz/flowInstance/doGetList', params).then(res => {
                if (res.retHead.code === '0000000') {
                    if(null!=res.retBody){
                        this.tableData = res.retBody;
                        if(res.retBody[0] &&  res.retBody[0].total){
                            this.pager.total = res.retBody[0].total;
                        }else{
                            this.pager.total=0;
                        }
                       
                    }else{
                        this.tableData = res.retBody;
                        this.pager.total = 0;
                    }
                    
                     
                }
            });
        },
        handleSelectionChange: function (val) {
            this.ids = val;
            //console.log(this.ids);
        },

        dateFormatter: function (row, column) {
            let datetime = row[column.property];
            if(datetime){
                datetime = new Date(datetime);
                let y = datetime.getFullYear() + '-';
                let mon = datetime.getMonth()+1 + '-';
                let d = datetime.getDate();
                return y + mon + d;
            }
            return ''
        },
      handleSizeChange(val) {
        this.pager.size = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.pager.page = val;
        this.getList();
      },
      progress(item){
        let path = '/flow/taskWorkitem';
        this.$router.push({
            path: path,
            query: { id: item.id }
        });
      },
      showDetail(item){
        this.designerVisible=true;
        this.$nextTick(()=>{
            this.$refs.projHandleDisplay.innit(item.mid);
        })
        
      }
    }
}

</script>
